React-pdf

Product Details

Share product using affiliate link

× Close

Your Affiliate Link

Copy Link

Share your affiliate link on Social Media

Close

Create PDF files using React

React renderer for creating PDF files on the browser and server

## Lost? This package is used to _create_ PDFs using React. If you wish to _display_ existing PDFs, you may be looking for [react-pdf](https://github.com/wojtekmaj/react-pdf). ## How to install ```sh yarn add @react-pdf/renderer ``` ## How it works ```jsx import React from 'react'; import { Document, Page, Text, View, StyleSheet } from '@react-pdf/renderer'; // Create styles const styles = StyleSheet.create({ page: { flexDirection: 'row', backgroundColor: '#E4E4E4', }, section: { margin: 10, padding: 10, flexGrow: 1, }, }); // Create Document Component const MyDocument = () => ( Section #1 Section #2 ); ``` ### `Web.` Render in DOM ```jsx import React from 'react'; import ReactDOM from 'react-dom'; import { PDFViewer } from '@react-pdf/renderer'; const App = () => ( ); ReactDOM.render(, document.getElementById('root')); ``` ### `Node.` Save in a file ```jsx import React from 'react'; import ReactPDF from '@react-pdf/renderer'; ReactPDF.render(, `${__dirname}/example.pdf`); ``` ## Contributors This project exists thanks to all the people who contribute. Looking to contribute? Please check our [[contribute]](https://github.com/diegomura/react-pdf/blob/master/.github/CONTRIBUTING.md) document for more details about how to setup a development environment and submitting code. ## Sponsors Thank you to all our sponsors! [[Become a sponsors](https://opencollective.com/react-pdf#sponsors)] ## Backers Thank you to all our backers! [[Become a backer](https://opencollective.com/react-pdf#backer)] ## License MIT © [Diego Muracciole](http://github.com/diegomura) ---